<template>
  <el-dialog
    :modelValue="showDlg"
    :title="title"
    width="500px"
    :before-close="handleClose"
  >
    <div>
      <el-form
        :model="formData"
        label-width="100px"
        ref="formRef"
        :rules="formRule"
        inline
      >
        <el-form-item label="用户名称" prop="">
          <el-input
            clearable
            disabled
            v-model="props.userName"
            placeholder="请输入用户名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色列表" prop="">
          <el-checkbox
            v-model="formData.checkAll"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
          >
            全选
          </el-checkbox>
          <el-checkbox-group
            v-model="formData.roleIdList"
            @change="handleChangeRole"
          >
            <el-checkbox
              v-for="role in roleList"
              :key="role.id"
              :label="role.id"
            >
              {{ role.roleName }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="saveForm(formRef)">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElButton } from 'element-plus'
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { addUserRole, reqUserRole } from '@/api/acl/user/user'
import type { RoleData, RoleListReq } from '@/api/acl/user/type'

let $emit = defineEmits('closeDlg', 'saveDlg')
import type { FormInstance, FormRules } from 'element-plus'
let props = defineProps({
  showDlg: {
    type: Boolean,
    default: false,
  },
  id: Number,
  userName: String,
  
})
const roleList = ref<any[]>([])
const isIndeterminate = ref<boolean>(false)
let formData = reactive<any>({
  userId: 0,
  roleIdList: [],
})
const checkAll = ref(false)
const formRef = ref<FormInstance>()
const formRule = reactive<FormRules>({})

const handleCheckAllChange = (val: boolean) => {
  formData.roleIdList = val ? roleList : []
}
const handleChangeRole = (value: string[]) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === roleList.value.length
}
onMounted(() => {
  if (props.id) {
    formData.userId = props.id
    addUserRole(props.id).then((res: any) => {
      if (res.code == 200) {
        roleList.value = res.data.allRolesList||[]
        formData.roleIdList = res.data.assignRoles.map((item: RoleData) => {
          return item.id
        })
      }
    })
  }
})
const title = computed(() => {
  return props.id ? '修改' : '新增'
})

const handleClose = () => {
  $emit('closeDlg', false)
}
const saveForm = async (formRef: FormInstance | undefined) => {
  if (!formRef) return
  await formRef.validate(async (valid, fields) => {
    if (valid) {
      const res = await reqUserRole(formData)
      console.log(res)
      if (res.code == 200) {
        ElMessage.success(props.id ? '修改成功' : '新增成功')
      } else {
        ElMessage.warning('新增失败')
      }
      $emit('saveDlg', false)
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>
<style lang="scss" scoped>
.el-input {
  width: 100%;
}
::v-deep .el-input,
.el-form-item {
  width: 100%;
}
</style>
